<template>
  <div class="Pproduct" style="margin-bottom:20px;">
    <el-container>
      <el-header style="height:35px; background:#f2f2f2">
        <p>
          订单号:
          <span>{{msg}}</span>
        </p>
        <p>
          下单日期:
          <span>{{msn}}</span>
        </p>
        <p style="color:#91bc8a">爱果果水果店</p>
        <p style="margin-left:7%;">
          订单状态:
          <span style="color:#f08200">{{mss}}</span>
        </p>
      </el-header>
      <el-main style="height:203px; padding:0px;">
        <div class="zong">
          <div class="product">
            <div class="product1">
              <div class="img1">
                <img src="../assets/images/baner-16.png" alt />
              </div>
              <p>云南丑苹果</p>
              <p>6个装</p>
              <p>￥35.0*{{msd}}</p>
            </div>
            <div class="product1 product2">
              <div class="img1">
                <img src="../assets/images/baner-16.png" alt />
              </div>
              <p>云南丑苹果</p>
              <p>6个装</p>
              <p>￥35.0*{{msd}}</p>
            </div>
          </div>
          <div class="price">
            <p style="margin-top:80px;">
              店铺合计:
              <span>{{mse}}</span>
            </p>
            <p>（含运费:￥8.0元）</p>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// import Pbutton from "@/components/P_button.vue";
export default {
  name: "Pproduct",
  components: {
    // Pbutton
  },
  props: {
    msg: String,
    msn: String,
    mss: String,
    msd: String,
    mse: String
  }
};
</script>
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 35px;
  display: flex;
}
.el-header p {
  margin-right: 5%;
}
.el-main {
  background-color: #fff;
  color: #333;
  border: 1px solid #e9eef3;
  text-align: center;
  /* line-height: 160px; */
}
.el-main .zong {
  width: 100%;
  height: 100%;
  display: flex;
}
.el-main .zong .product {
  width: 60%;
  height: 100%;
  border-right: 1px solid #e9eef3;
}
.el-main .zong .product .product1 {
  height: 100px;
  border-bottom: 1px solid #e9eef3;
  display: flex;
}
.el-main .zong .product .product2 {
  border-bottom: none;
}
.el-main .zong .product .product1 .img1 {
  width: 18%;
  margin: 1.5% 0 1.5% 3%;
  height: 80%;
  border: 1px solid #e9eef3;
  margin-right: 3%;
}
.el-main .zong .product .product1 .img1 img {
  width: 80%;
}
.el-main .zong .product .product1 p {
  line-height: 100px;
  margin-right: 10%;
}
.el-main .zong .price {
  width: 22%;
  height: 100%;
  border-right: 1px solid #e9eef3;
}
.el-main .zong .Pbutton{
  margin-top:5%;
  padding:3px 15px;
  display:inline-block; 
}
/* .el-main .zong .caozuo{
  position: relative;
  width:18%;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
}
 .el-main .zong .caozuo .click{
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  margin: auto;
} */
</style>